<template>
  <view class="make-clock-in">
    <view class="info-row">
      <view class="title">逛青丝手账得补卡机会</view>
      <view v-if="clockInDetail" class="count">可补签：{{ clockInDetail.clockin_data.left_num || 0 }}次</view>
    </view>
    <view class="cell-wrap">
      <view class="left">
        <u-image :src="icon" width="24" height="24" mode="heightFix" />
        <view class="label">
          浏览青丝手账30s
          ({{ clockInDetail.clockin_data.re_num_limit }}/{{ clockInRuleData.max_renum || 0 }})
        </view>
      </view>
      <view
        class="view-btn"
        :class="{'view-btn__disabled': clockInDetail.clockin_data.re_num_limit === clockInRuleData.max_renum}"
        @click="onToViewDiary"
      >
        去浏览
      </view>
    </view>
  </view>
</template>

<script>
import {
  mapState
} from 'vuex'
import diaryImg from '@/static/images/tabBar/diary-active.png'
export default {
  data() {
    return {
      icon: diaryImg
    }
  },
  computed: {
    ...mapState(['clockInDetail', 'clockInRuleData'])
  },
  watch: {
    clockInDetail(data) {
      console.log('打卡详情')
      console.log(data)

      console.log('打卡规则')
      console.log(this.clockInRuleData)
    }
  },
  methods: {
    onToViewDiary() {
      const {
        clockin_data
      } = this.clockInDetail
      // 已补上次数 === 最大可补上次数，则禁用
      if (clockin_data.re_num_limit === this.clockInRuleData.max_renum) return
      uni.setStorageSync('is_get_chance', 1)
      this.$utils.switchTabToPage('/pages/diary')
    }
  }
}
</script>

<style lang="scss" scoed>
	.make-clock-in {
		width: 95%;
		padding: 26rpx;
    padding-bottom: 0;
		margin: 30rpx auto 0;
		background: #FFF;
		border-radius: 20rpx;
		box-shadow: 0 2rpx 6rpx 0 rgba(0, 0, 0, 0.05);

		.info-row {
			@include flex-between;
			padding-bottom: 26rpx;
			border-bottom: 1px solid #E6E6E6;

			.title {
				font-size: 32rpx;
				font-weight: bolder;
			}

			.count {
				font-size: 32rpx;
				color: #6DD400;
			}
		}

		.cell-wrap {
			padding: 40rpx 30rpx;
			@include flex-between;

			.left {
				@include flex-column-center;
				gap: 15rpx;

				.label {
					font-size: 28rpx;
					font-weight: bolder;
				}
			}

			.view-btn {
				// height: 60rpx;
				// line-height: 60rpx;
				padding: 10rpx 28rpx;
				border-radius: 50rpx;
				background-color: $theme-color;
				font-size: 24rpx;
        font-weight: bolder;

				&__disabled {
					background-color: #F5F5F5;
				}

				&:active {
					opacity: 0.5;
				}
			}
		}
	}
</style>
